<template>
  <div class="success-item">
    <el-row class="success-body">
      <el-col :span="14">
        <el-row class="success-head">
          <img src="http://192.168.2.27:8888/assets/pay/alipay.png" alt="" />
          <span>支付宝支付</span>
        </el-row>
        <el-row class="success-center">
          <el-row
            ><el-icon size="80px"><SuccessFilled color="#1678ff" /></el-icon
          ></el-row>
          <el-row class="pay-item">支付成功</el-row>
          <el-row class="second-item">{{ second }}秒后返回会员页面</el-row>
          <el-row class="button-item">
            <el-button type="primary" @click="returnlevel">立即返回</el-button>
          </el-row>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { SuccessFilled } from "@element-plus/icons-vue";

export default {
  components: {
    SuccessFilled,
    // SlideVerify
  },
  data() {
    return {
      second: 3,    
    };
  },
  setup() {
  },
  created() {
    let timer = setInterval(() => {
      this.second--;
      if (this.second == 0) {
        clearInterval(timer);
        timer = null;
        // this.$router.push('/myinfo/levelup')
      }
    }, 1000);
  },
  methods: {
    returnlevel() {
        this.$router.push("/myinfo/levelup");
    },
  },
};
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.success-item {
  width: 100%;
  height: 100vh;
  background-color: #e6e6e6;
  overflow: hidden;
  .success-body {
    height: 65%;
    margin-top: 8%;
    > .el-col {
      margin: 0 auto;
      background-color: #fff;
      border-radius: 10px;
      padding: 20px 40px;
      display: flex;
      flex-direction: column;
      .success-head {
        width: 100%;
        height: 10%;
        // background-color: red;
        display: flex;
        align-items: center;
        // margin-bottom: 5%;
        img {
          width: 40px;
          height: 40px;
          vertical-align: top;
        }
        span {
          font-size: 16px;
          margin-left: 5px;
          color: #666;
          font-weight: 600;
          letter-spacing: 1px;
          //   background-color: yellow;
        }
      }
      .success-center {
        width: 100%;
        height: 90%;
        //   background-color: red;
        display: flex;
        flex-direction: column;
        padding: 40px;
        justify-content: space-around;
        align-items: center;
        .pay-item {
          font-size: 18px;
          font-weight: 700;
        }
        .second-item {
          font-size: 12px;
          color: #aaa;
          letter-spacing: 2px;
        }
        .button-item {
          width: 100%;
          //   background-color: red;
          justify-content: center;
          .el-button {
            width: 25%;
            height: 40px;
            background-color: #1678ff;
          }
        }
      }
    }
  }
}
</style>